<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>添加分类</title>
    <link rel="stylesheet" href="__STATIC__/admin/css/pintuer.css">
    <link rel="stylesheet" href="__STATIC__/admin/css/admin.css">
    <script src="__STATIC__/admin/js/jquery.js"></script>
    <script src="__STATIC__/admin/js/pintuer.js"></script>
    <script src="__STATIC__/admin/plugin/webuploader/webuploader.js"></script>
    <link rel="stylesheet" href="__STATIC__/admin/plugin/webuploader/webuploader.css">
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 分类管理</strong></div>
    <div class="body-content">

        <table class="table table-hover text-center">
            <tr>
                <th width="120">ID</th>
                <th>分类</th>
                <th>标题</th>
                <th width="120">添加时间</th>
                <th>操作</th>
            </tr>
            <{volist name="res" id="vo"}>
            <tr>
                <td><{$vo.id}></td>
                <td><{$vo.catename}></td>
                <td><{$vo.title}></td>
                <td><{$vo.addtime}></td>
                <td>
                    <div class="button-group"> <a class="button border-red" href="javascript:void(0)" onclick="return del(1)"><span class="icon-trash-o"></span> 删除</a> </div>
                    <div class="button-group"> <a class="button border-blue" href="javascript:void(0)" onclick="return del(1)"><span class="icon-trash-o"></span> 修改</a> </div>
                </td>
            </tr>
            <{/volist}>

            <tr>
                <td colspan="8"><div class="pagelist"> <a href="">上一页</a> <span class="current">1</span><a href="">2</a><a href="">3</a><a href="">下一页</a><a href="">尾页</a> </div></td>
            </tr>
        </table>
    </div>
</div>

<script>
    $(function(){//加载后才执行
        var GUID=WebUploader.Base.guid(); //生成GUID
        var uploader = WebUploader.create({
            //swf文件路径
            swf:'/static/admin/plugin/webuploader/Uploader.swf',
            server:'/admin/video/upload_chunk',//文件接收服务端
            pick:'#picker',//选择文件的按钮-可选,内部根据当前运行时创建,可能是input也可能是FLASH元素
            resize:false, //不压缩image,默认是JPEG,文件上传前会压缩一把在上传
            chunked:true,//开启芬片上传
            chunkSize:1*1024*1024,//每一片的大小是1M
            formData: {
                guid:GUID //自定义参数
            },
            method:'POST'
        })
        var $state = $('.state')
        var $name = $(".name")
        //当有文件被添加进队列的时候
        uploader.on('fileQueued',function(file){
            //$state.append('<font color="red">等待上传...</font>')
            $name.append(file.name)
            uploader.upload()
            $(".progress").show()
        })
        uploader.on('beforeUpload',function(file){
            console.log("文件准备上传:",file)
        })
        /*$("#ctlBtn").on("click",function(){//上传按钮添加上传事件
            return false;//之前如果没加return false,你点击提交按钮时相当于也点击了最下面的提交按钮,成功后它会刷新页面->进而造成不会执行后面的操作
        })*/
        //上传成功后,调用合并功能把切片文件合成一个文件
        uploader.on('uploadSuccess',function(file,response){
            console.log("分片上传成功:",response);
            if(response.isLastChunk){
                $.post('/admin/video/merge_chunks?XDEBUG_SESSION_START=15571',{guid:GUID,fileName:file.name},function(data){
                    $state.html('<font color="green">上传完成!</font>')
                    $("#uploader .progress-bar").width('0%')
                    $(".progress").hide()
                    var previewUrl = "/storage/" + file.name;
                    $("input[name='url']").val("/storage/" + file.name + '/playlist.m3u8');//将input框内容改成m3u8文件地址
                    $("#preview video").attr("src",previewUrl);//更新视频URL
                    $("#preview video").attr("autoplay","true");//直接播放
                    $("#preview").parent().show();
                })
            }
        })
        uploader.on('uploadError', function () {
            $(".progress-bar").width('0%');
            $(".progress").hide()
            $state.html("<font color='red'>上传失败...</font>");
        });//上传失败
        //文件上传过程中创建进度条实时显示
        uploader.on('uploadProgress',function(file, percentage){
            $(".progress-bar").width(percentage * 100 + '%')
            $state.html('<font color="blue">上传中......</font>')
            $(".sr-only").text(Math.ceil(percentage*100) + '%')
        })
    })
</script>
</body></html>